import React from 'react';
import { TabNavigator, TabBarBottom } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Chat from './Chat';
import People from './People';
import Home from './Home';
import Settings from './Settings';

const tabBarIcon = (navigation, { focused, tintColor }) => {
  const { routeName } = navigation.state;
  const icons = {
    Chat: `ios-chatboxes${focused ? '' : '-outline'}`,
    People: `ios-people${focused ? '' : '-outline'}`,
    Home: `ios-ionic${focused ? '' : '-outline'}`,
    Settings: `ios-settings${focused ? '' : '-outline'}`
  };
  const iconName = icons[routeName];
  return <Ionicons name={iconName} size={25} color={tintColor} />;
};

const MainScreen = TabNavigator(
  {
    Chat: { screen: Chat },
    People: { screen: People },
    Home: { screen: Home },
    Settings: { screen: Settings }
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon({ focused, tintColor }) {
        return tabBarIcon(navigation, { focused, tintColor });
      }
    }),
    tabBarOptions: {
      activeTintColor: '#2aa1ff',
      inactiveTintColor: '#999999'
    },
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false
  }
);

export default MainScreen;
